.card.app-banner {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: var( --color-primary-light );
	color: var( --color-text-inverted );
	/* Needed for banner to appear in front of notifications panel. */
	z-index: z-index( 'root', '.app-banner' );
}

.app-banner__illustration {
	height: 140px;
	position: absolute;
	right: 0;
	z-index: z-index( 'root', '.app-banner__illustration' );
}

.app-banner__text-content {
	width: calc( 100% - 124px );
	min-height: 66px;
}

.app-banner__title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}

.app-banner__copy {
	font-size: $font-body-extra-small;
	font-weight: 400;
}

.app-banner__buttons {
	width: calc( 100% - 84px );
}

.button.app-banner__open-button {
	margin-top: 8px;
}

.button.app-banner__no-thanks-button {
	background: none;
	border: 0;
	color: var( --color-text-inverted );
	display: inline-block;
	margin-top: 8px;
	padding: 7px 0 9px 14px;
	text-decoration: none;
	font-weight: 600;
	font-size: $font-body-small;
	line-height: 24px;
}
